import styles from './index.less';
import { createPortal } from 'react-dom'
import { DialogStackItem } from "./useDialog"
import React, { createContext, Dispatch, useState, useReducer, useEffect, useContext } from "react"
import DialogContext from "./dialogContext"
import MatchComponent from "./MatchComponent"

const Dialog = () => {
    const { dialogStack } = useContext(DialogContext)
    console.log("现在有东西吗", " dialogStack ", dialogStack)
    return createPortal(
        <>
            {/* <div className={styles.dialogBox}>
                <div className={styles.dialog}>
                    {children}
                </div>
            </div> */}
            {



                dialogStack.map(({ dialogFlag, dialogProps }, index) => {
                    const DialogContent = MatchComponent(dialogFlag)
                    console.log("展示吗", " DialogContent ", DialogContent)
                    return (
                        DialogContent
                        &&
                        <div key={dialogFlag + index} className={styles.dialogBox}>
                            <div className={styles.dialog}>
                                <DialogContent dialogProps={dialogProps} />
                            </div>
                        </div>
                    )
                })
            }
        </>,
        document.body
    )
}

export default Dialog
